<template>
  <el-container>
    <el-main>
      <el-table
        id="table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="menuId"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
        <el-table-column prop="menuId" label="菜单ID" width="120"></el-table-column>
        <el-table-column prop="menuName" label="菜单名称" width="150"></el-table-column>
        <el-table-column prop="menuParentId" label="上级菜单" width="150"></el-table-column>
        <el-table-column prop="menuType" label="菜单类型" width="150"></el-table-column>
        <el-table-column prop="menuSign" label="菜单标识" width="150"></el-table-column>
        <el-table-column prop="menuUrl" label="菜单地址" width="150"></el-table-column>
        <el-table-column prop="menuQueueNumber" label="排序号" width="150"></el-table-column>
        <el-table-column prop="menuStatus" :formatter="formatStatus" label="状态" width="70"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150"
        v-if="$store.state.updateMenuFlag||$store.state.deleteMenuFlag"
        >
          <template slot-scope="scope">
            <el-button
              type="primary "
              prop="userId"
              class="updatebtn"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="updateUserManager(scope.row)"
              v-if="$store.state.updateMenuFlag"
            ></el-button>
            <el-button
              type="danger "
              icon="el-icon-delete"
              circle
              size="mini"
               v-if="$store.state.deleteMenuFlag"
              @click="deleteForm(scope.row.menuId)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { Message } from "element-ui";
export default {
  props: ["menu", "selectMenu"],
  components: {},
  data() {
    return {
      // arr: [],
      multipleSelection: [],
      tableData: [],
      queryMenu: {},
      page: {
        current: 1,
        size: 5,
        total: 0,
      },
    };
  },
  methods: {
    updateUserManager(val) {
      this.$emit("openUpdateDialog", val, true);
    },
    deleteForm(index) {
      // console.log(index);
      const that = this;
      that.$http
        .get("/menu/deleteMenuById", { params: { menuId: index } })
        .then((res) => {
          // console.log(res)
          if (res.data == 1) {
            Message({ message: "删除成功", type: "success" });
            this.$store.dispatch("findAllMenu");
          } else {
            Message({ message: "删除失败", type: "error" });
          }
          that.menuList();
        });
    },
    menuList() {
      const vm = this;
      const param = new URLSearchParams();
      param.append("pageNum", this.page.current);
      param.append("pageSize", this.page.size);
      if (this.selectMenu.name) {
        param.append("menuName", this.selectMenu.name);
      }

      let status;
      if (this.selectMenu.status == "有效") {
        status = 1;
      } else if (this.selectMenu.status == "无效") {
        status = 0;
      } else {
        status = -1;
      }
      param.append("menuStatus", status);

      if (this.selectMenu.menuType) {
        param.append("menuType", this.selectMenu.menuType);
      }
      this.$http({ method: "post", url: "/menu/menuList", data: param }).then(
        (res) => {
          // 得到parentid数组，通过id查询出对应的菜单名称
          const parentIds = [];
          for (let i = 0; i < res.data.list.length; i++) {
            parentIds.push(res.data.list[i].menuParentId);
          }
          // vm.$http.get('/menu/selectMenuNameByPid',)
          // 菜单数组通过循环给每个数组中的对象添加属性

          vm.tableData = res.data.list;
          vm.page.total = res.data.total;
          //   const arr=[]
          //   res.data.list.map((t, i) => {
          //     arr.push(Object.assign({}, t, { parentName: "系统管理" }));
          //   });
          //   vm.tableData =arr.filter(function (item, index, self) {
          //     return self.indexOf(item) == index;
          //   });
          //   console.log(vm.tableData);
        }
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("handleSelections", this.multipleSelection);
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.menuList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.menuList();
    },
    formatStatus(row, column) {
      // console.log(row.status + "页面状态展示");
      //   console.log(row.roleStatus);
      return row.menuStatus == 1 ? "有效" : "无效";
    },
    indexMethod(index) {
      return ++index;
    },
  },
  mounted() {
    this.menuList();
    this.$emit("page", this.page);
  },
  watch: {
    menu: {
      handler(nval, oval) {
        // console.log(nval);
        this.tableData = nval.data.list;
        this.page.total = nval.data.total;
      },
    },
    selectMenu: {
      handler(nval, oval) {
        this.menuList();
      },
      deep: true,
    },
  },
};
</script>
<style lang='less' scoped>
</style>